<template>
	<view class="navbar" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
		<view class="logo">
			<text class="logo-text">热链传导</text>
		</view>

		<!-- 搜索条 -->
		<view class="search" @click="goToSearch">
			<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入关键字搜索帖子" clearButton="auto"
				cancelButton="none" />
		</view>
	</view>
</template>

<script setup lang="ts">
	// 获取屏幕边界到安全区域距离
	const { safeAreaInsets } = uni.getWindowInfo()

	const goToSearch = () => {
		// 这里可以添加搜索逻辑，比如跳转到搜索结果页面
		uni.navigateTo({
			url: `/pages/search/search`
		})
	}
</script>

<style lang="scss">
	.navbar {
		position: relative;
		display: flex;
		flex-direction: column;
		padding-top: 20px;
		background-color: #FFFFFF;
	}

	.logo {
		display: flex;
		align-items: center;
		height: 39rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;

		.logo-text {
			flex: 1;
			line-height: 28rpx;
			margin: 2rpx 0 0 20rpx;
			padding-left: 20rpx;
			font-size: 28rpx;
		}
	}

	.search {
		margin-top: 20rpx;
	}
</style>